/*
 * 产品列表
 * @Author: ljb
 * @Date: 2018-03-27 17:53:05
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 18:07:25
 */
<style lang="less" rel="stylesheet/less" type="text/less">
	.v-admin-product-index {
		.code{
			overflow: hidden;
			white-space: nowrap;
			text-overflow:ellipsis;
			display: block;
		}
		.ivu-table-column-center{
			padding: 5px 0;
		}
		.ivu-table-body {
			overflow-x: auto;
		}
		.ivu-table-cell{
			padding-left: 10px;
			padding-right: 10px;
		}
		.info{
			text-align: left;
			white-space: nowrap;
			padding: 5px 0;
		}
		.info-thumb{
			width: 60px;
			height: 60px;
			cursor: pointer;
			display: table-cell;
			img{
				width: 100%;
			}
		}
		.info-title{
			height: 60px;
			display:  table-cell;
			white-space: normal;
			vertical-align: middle;
			padding-left: 8px;
		}
		.prices-item {
			white-space: nowrap;
			text-align: center;
		}
		.deleted, .hot, .new, .sale {
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="v-admin-product-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="products"
			:height="tableHeight()"
			border
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import Icon from 'iview/src/components/icon';
import showPictureMixin from 'src/views/mixins/showPictureMixin';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'ProductIndex',
	mixins: [showPictureMixin, computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		products: {
			type: Array,
			default() {
				return [];
			},
		},
		customers: {
			type: Object,
			default() {
				return {};
			},
		},
		brands: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('product.code'),
					key: 'name',
					align: 'center',
					width: 100,
					render: (h, { row }) => <div> { row.spu_code || '-' } </div>,
				},
				{
					title: this.$t('product.title'),
					key: 'title',
					width: 240,
					align: 'center',
					render: (h, { row }) => {
						const thumb_image = row.thumb_image ? <img onClick={() => this.showPicture(row.thumb_image.key, 400) } src={ row.thumb_image.key } alt="无" /> : '无';
						const title = row.title ? row.title : this.$t('common.none');
						return (
							<div class="info">
								<div class="info-thumb">{ thumb_image }</div>
								<div class="info-title">{ title }</div>
							</div>
						);
					},
				},
				{
					title: this.$t('product.price'),
					key: 'market_price',
					width: this.$i18n.locale === 'en-CN' ? 120 : 150,
					align: 'center',
					render: (h, { row }) => (
						<div class="price">
							<div class="prices-item">
								{ this.$t('product.origin_price') }　: { row.market_price || this.$t('common.none') }
							</div>
							<div class="prices-item">
								{ this.$t('product.promotional_price') }: { row.sell_price || this.$t('common.none') }
							</div>
						</div>
					),
				},
				{
					title: this.$t('product.category'),
					key: 'category',
					align: 'center',
					render: (h, { row }) => <div> { row.category ? row.category.name : '-' } </div>,
				},
				{
					title: this.$t('product.brand'),
					key: 'brand_id',
					align: 'center',
					render: (h, { row }) => <div> { this.brands[row.brand_id] || '-' } </div>,
				},
				{
					title: this.$t('product.stock'),
					key: 'stock',
					align: 'center',
					render: (h, { row }) => <div> { row.stock || '-' } </div>,
				},
				{
					title: this.$t('product.customer'),
					key: 'customer_id',
					align: 'center',
					render: (h, { row }) => <div> { this.customers[row.customer_id] || '-' } </div>,
				},
				{
					title: this.$t('product.try_on'),
					key: 'try_on',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { String(row.try_on) || 0 } </div>,
				},
				{
					title: this.$t('product.is_sale'),
					key: 'is_sale',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.is_sale) === 0
								? <Icon type="close"></Icon>
								: <Icon type="checkmark"></Icon>
						}
					</div>,
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					width: 200,
					align: 'center',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
			],
		};
	},
	methods: {

		/**
     * 排序的回调
     * @param  {Object} param {对应列的属性对象,里面包含了column列属性，key值，order排序字段}
     * @return {undefined}
     */
		sortable(param) {
			const search_param = {
				sort_column: param.key,

				sort_by: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},

	},
};
</script>
